<template>
  <div id="view"></div>
</template>

<script>
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/merge/merge.js';
import 'codemirror/addon/merge/merge.css';
import DiffMatchPatch from 'diff-match-patch';

window.diff_match_patch = DiffMatchPatch;
window.DIFF_DELETE = -1;
window.DIFF_INSERT = 1;
window.DIFF_EQUAL = 0;

export default {
  props: {
    oldValue: {
      type: String,
    },
    newValue: {
      type: String,
    },
  },
  mounted() {
    this.initUI();
  },
  methods: {
    initUI() {
      const target = document.getElementById('view');
      target.innerHTML = '';
      CodeMirror.MergeView(target, {
        value: this.oldValue, // 上次内容
        orig: this.newValue,  // 本次内容
        lineNumbers: true, // 显示行号
        highlightDifferences: true, // 高亮显示差异
        connect: 'align', // 连接方式
        readOnly: false
      });
    }
  }
}
</script>